<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类目统计</title>
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="width: 100%;margin: 0;padding: 0">
            <div class="select" style="width: 100%;height: 60px; background-color: rgba(243, 243, 243, 1)">
                <el-date-picker
                        @change="fetchData()"
                        end-placeholder="结束日期"
                        range-separator="至"
                        size="large"
                        start-placeholder="开始日期"
                        style="margin: 10px 8px 10px;"
                        type="daterange"
                        v-model="dataRange">
                </el-date-picker>
            </div>
        </el-header>
    </el-container>


    <div id="main" style="margin: 20px 180px 0 ; width: 800px;height: 400px">
    </div>
    <div class="table" style="margin: 0 174px">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    label="分类名称"
                    prop="category1Name"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="销售量"
                    prop="num"
                    width="106">
            </el-table-column>
            <el-table-column
                    label="销售量占比"
                    width="180">
                <template slot-scope="scope">
                    {{((scope.row.num/totalNum)*100).toFixed(2)}}%
                </template>
            </el-table-column>
            <el-table-column
                    label="销售额"
                    prop="money"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="销售额占比"
                    width="180">
                <template slot-scope="scope">
                    {{(scope.row.money/totalMoney*100).toFixed(2)}}%
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>

<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script src="/js/echarts.common.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                dataRange: [],
                totalNum: 0,
                totalMoney: 0
            }
        },
        methods: {
            fetchData() {
                let startDate = this.dataRange[0].Format("yyyy-MM-dd");
                let endDate = this.dataRange[1].Format("yyyy-MM-dd");
                axios.get(`/categoryReport/category1Count.do?date1=${startDate}&date2=${endDate}`).then(res => {
                    console.log(res.data)
                    this.tableData = res.data
                    //计算总的销售数量与销售金额
                    this.totalNum = 0
                    this.totalMoney = 0
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.totalNum += this.tableData[i].num;
                        this.totalMoney += this.tableData[i].money;
                    }

                    let legendData = []//图例
                    let numData = []//销售量数据
                    let moneyData = []//销售额数据
                    for (let i = 0; i < this.tableData.length; i++) {
                        legendData.push(this.tableData[i].category1Name)
                        numData.push({
                            name: this.tableData[i].category1Name,
                            value: this.tableData[i].num
                        })
                        moneyData.push({
                            name: this.tableData[i].category1Name,
                            value: this.tableData[i].money
                        })
                    }

                    //创建饼图
                    let chartDom = document.getElementById('main');
                    let myChart = echarts.init(chartDom);
                    let option;
                    option = {
                        title: {
                            text: '商品类目销售分析',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'pie',
                                radius: '40%',
                                center: ["30%", "50%"],
                                data: numData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            {
                                name: '销售额',
                                type: 'pie',
                                radius: '40%',
                                center: ["70%", "50%"],
                                data: moneyData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                })
            }
        }
    })

</script>
</body>
</html>